var canvas = document.querySelector("#mycanvas"),
    cont = canvas.getContext("2d");

    console.log(canvas);

//创建矩形
function Rect(x, y, w, h, c) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;
}

//画矩形
Rect.prototype.draw = function () {
    cont.beginPath();
    cont.rect(this.x, this.y, this.w, this.h);
    cont.fillStyle = this.c;
    cont.fill();
    cont.stroke();
}

//矩形移动  37左38上39右40下
Rect.prototype.move = function () {
    //根据蛇的方向决定移动方向
    switch (snake.direc) {
        case 37:
            this.x -= this.w;
            break;
        case 38:
            this.y -= this.h;
            break;
        case 39:
            this.x += this.w;
            break;
        case 40:
            this.y += this.h;
            break;
    }
}

//蛇对象
function Snake() {
    this.direc = 37;
    this.update = false;
    this.isOnBody = false;
    //初始化蛇
    this.bodyArr = [];
    for (var i = 0; i < 4; i++) {
        this.bodyArr.push(new Rect(400 + i * 10, 300, 10, 10, "#87ceeb"));
    }
    this.bodyArr[0].c = "#00FF00";
}

//蛇移动
Snake.prototype.move = function () {
    //解锁
    this.update = false;
    //在蛇头移动后插入一个方块
    this.bodyArr.splice(1, 0, new Rect(this.bodyArr[0].x, this.bodyArr[0].y, 10, 10, "#87ceeb"));
    //判断是否吃到食物，如果吃到，则再创建食物，并且不移除尾部方块
    if (food.x == this.bodyArr[0].x && food.y == this.bodyArr[0].y) {
        food = createFood();
    }
    else {
        this.bodyArr.pop();
    }
    //始终只有蛇头在移动
    this.bodyArr[0].move();

}


//创建食物
// //随机生成食物位置函数
// function food(){
//     ctx.clearRect(0,0,mycanvas.width,mycanvas.height);

//     random_x =parseInt(Math.random()*(500-15));
//     random_y =parseInt(Math.random()*(500-15));
//     ctx.fillRect(random_x,random_y,15,15);
// }
function createFood() {
    //判断食物是否在蛇身上
    var isOnSnake = true;
    while (isOnSnake) {
        var x = rand(0, 500 / 10);
        var y = rand(0, 500 / 10);
        for (var i = 0; i < snake.bodyArr.length; i++) {
            //当食物生成身体上，则继续创建食物
            if (snake.bodyArr[i].x == x && snake.bodyArr[i].y == y) {
                isOnSnake = true;
                break;
            } else {
                isOnSnake = false;
            }
        }
    }
    return new Rect(x, y, 10, 10, "#00FF00");
}

var snake = new Snake();
var food = createFood();
var times = 0;

//动画
function run() {
    times++;
    if (times % 10 == 0) {
        cont.fillStyle = 'white';
        cont.fillRect(0, 0, canvas.width, canvas.height);
        food.draw();
        snake.move();
        for (var i = 0; i < snake.bodyArr.length; i++) {
            snake.bodyArr[i].draw();
        }
    }

    //判断蛇头是否撞到身体
    for (var i = 1; i < snake.bodyArr.length; i++) {
        if ((snake.bodyArr[0].x == snake.bodyArr[i].x) && (snake.bodyArr[0].y == snake.bodyArr[i].y)) {
            snake.isOnBody = true;
            break;
        } else {
            snake.isOnBody = false
        }
    }
    var gg = 0;
    //当撞墙或者撞到身体就停止运动
    if (snake.bodyArr[0].x < 0 || snake.bodyArr[0].x > canvas.width - 10 || snake.bodyArr[0].y < 0 || snake.bodyArr[0].y > canvas.height - 10 || snake.isOnBody) {
        alert('game,over');
        document.location.reload();
    } else {
        gg = window.requestAnimationFrame(run);
    }
}
run();

//按键事件
document.onkeydown = function (e) {
    var ev = e || window.event;
    if (!snake.update) {
        switch (ev.keyCode) {
            case 37:
                if (snake.direc != 39) {
                    snake.direc = 37;
                    snake.update = true;
                }
                break;
            case 38:
                if (snake.direc != 40) {
                    snake.direc = 38;
                    snake.update = true;
                }
                break;
            case 39:
                if (snake.direc != 37) {
                    snake.direc = 39;
                    snake.update = true;
                }
                break;
            case 40:
                if (snake.direc != 38) {
                    snake.direc = 40;
                    snake.update = true;
                }
                break;
        }
    }
}

//随机生成举行位子函数
function rand(min, max) {
    return parseInt(Math.random() * (max - min) + min) * 10;
}
